<template>
  <el-container class="main-container">
    <!-- 左侧固定导航 -->
    <el-aside width="220px" class="aside">
      <div class="nav-bar">
<!--        <i class="iconfont icon-icon-weidianwang icon-logo"></i>-->
        <img
            :src="bgImage"
            alt="本地背景图"
            width="100px"
        >
        <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo custom-menu"
            @select="handleSelect"
            background-color="#06102a"
            text-color="#fff"
            active-text-color="#fff"
            router
        >
          <!-- 子菜单：参数设置 -->
          <el-sub-menu index="param-settings" class="menuSubItem">
            <template #title>
              <span>
                <i class="iconfont icon-_canshu_canshushezhi icon"></i>参数设置</span>
            </template>
            <el-menu-item index="/battery" class="menuItem">
              <i class="iconfont icon-dianchiguanli icon"></i>电池管理
            </el-menu-item>
            <el-menu-item index="/electPrice" class="menuItem">
              <i class="iconfont icon-shouye-dianjiaxinxi icon"></i>电价配置
            </el-menu-item>
            <el-menu-item index="/env" class="menuItem">
              <i class="iconfont icon-huanjingcanshu icon"></i>环境参数设置
            </el-menu-item>
          </el-sub-menu>

          <!-- 普通菜单项 -->
          <el-menu-item index="/simulation" class="menuItem">
            <i class="iconfont icon-fangzhencanshu icon"></i>仿真任务创建</el-menu-item>
          <el-menu-item index="/envTable" class="menuItem">
            <i class="iconfont icon-yunhangguanli icon"></i>仿真运行管理</el-menu-item>
<!--          <el-menu-item index="/dashboard" class="menuItem">-->
<!--            <i class="iconfont icon-xitongzhuangtai icon"></i>仿真系统状态</el-menu-item>-->
          <el-menu-item index="/history" class="menuItem">
            <i class="iconfont icon-lishishuju icon"></i>历史仿真记录</el-menu-item>
        </el-menu>
      </div>
    </el-aside>

    <!-- 右侧整体布局 -->
    <el-container class="right-container">
      <el-header class="header">
        智能微电网能量调度仿真平台
      </el-header>
      <el-main class="main-scroll">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import bgImage from '../src/assets/bg2.png'
const router = useRouter()
const route = useRoute()
const activeIndex = ref(route.path)

const handleSelect = (index) => {
  router.push(index)
}

watch(() => route.path, (newPath) => {
  activeIndex.value = newPath
})
</script>

<style scoped>
.main-container {
  height: 100vh;
  overflow: hidden;
  background-color: transparent;
}

.aside {
  background: #0E1841;
}
:deep(.el-menu) {
  --el-menu-bg-color: transparent !important;
  --el-menu-hover-bg-color: #627dce !important;
  background-color: var(--el-menu-bg-color) !important;
}
.nav-bar {
  margin: 8px;
  border-radius: 12px;
  background-color: #0E1841; /* 从#ffffff改为transparent */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 8px 0;
  overflow: hidden; /* 关键：防止残影溢出 */
}

.custom-menu {
  background: transparent !important;
  border: none;
}
:deep(.el-menu.custom-menu) .menuSubItem > .el-sub-menu__title:hover {
  background-color: #81a6d7 !important;
  border-radius: 8px !important;
}

/* 统一所有菜单项样式 */
.menuSubItem .el-sub-menu__title,
.menuItem {
  height: 48px !important;
  line-height: 48px !important;
  margin: 4px 8px !important;
  border-radius: 8px !important;
  padding-left: 20px !important;
  transition: background-color 0.2s ease;
  color: #ffffff;
}

.menuSubItem{
  margin: 4px 8px;
  color: #ffffff;
}

/* 统一hover效果 */
.menuSubItem .el-sub-menu__title:hover,
.menuItem:hover {
  background-color: #81a6d7 !important;
  border-radius: 8px;
  margin: 4px 8px;
}

/* 激活状态样式 */
.menuItem.is-active {
  background-color: #627dce !important;
}

/* 子菜单展开时的标题样式 */
.menuSubItem.is-active > .el-sub-menu__title {
  background-color: #627dce !important;
}

/* 子菜单内部样式 */
.el-menu--inline {
  background-color: #052a48 !important;
  padding: 0 !important;
}
.el-menu--inline .el-menu-item {
  height: 44px !important;
  line-height: 44px !important;
  margin: 2px 8px !important;
  padding-left: 40px !important;
  border-radius: 6px !important;
  min-width: auto !important;
}
.el-menu--inline .el-menu-item:hover {
  background-color: #81a6d7 !important;
}

/* 右侧布局样式 */
.right-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 70px;
  background-color: #223388; /* 从#273f9a改为transparent */
  color: #ffffff;
  text-align: center;
  font-size: 30px;
  line-height: 70px;
  font-weight: bold;
  flex-shrink: 0;
  padding-left :40px;
  border-bottom: 1px solid #e5e7eb; /* 添加下边框 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 添加轻微阴影增强层次感 */
  letter-spacing: 4px; /* 字母间距 */
}

.main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background-color: transparent; /* 从#f5f7fa改为transparent */
}

/* 修复残影的关键设置 */
.el-menu--vertical {
  z-index: 100;
}
.el-menu--inline {
  z-index: 99;
}
:deep(.el-sub-menu__title){
  color: #ffffff;
}
.el-sub-menu__title,
.el-menu-item {
  color: #ffffff;
  will-change: transform; /* 优化动画性能 */
}
.icon{
  margin-right: 10px;
}
.icon-logo{
  font-size: 80px;
}
</style>